import './css/index.less';

export class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            columns: [
                {
                    title: 'Name',
                    dataIndex: 'name',
                }, {
                    title: 'Age',
                    dataIndex: 'age',
                }, {
                    title: 'Address',
                    dataIndex: 'address',
                }, {
                    title: 'operation',
                    dataIndex: 'operation',
                    render: (text, record) => {
                        return <Antd.Popconfirm title="Sure to delete?"
                                                onConfirm={this.onDelete.bind(this, record.key)}>
                            <a href="javascript:;">Delete</a>
                        </Antd.Popconfirm>;
                    },
                },
            ],
            selectedRowKeys: [],
            data: [],
            visible: false,
            keys: [],
        };
    };

    onSelectChange(selectedRowKeys) {
        let keys = this.state.keys;
        keys.push(selectedRowKeys);
        console.log(selectedRowKeys);
        this.setState({
            selectedRowKeys: selectedRowKeys,
            keys: keys,
        });
    }

    remove() {
        let self = this;
        const dataSource = [...this.state.data];
        let result = [];

        result = dataSource.filter((item, index) => {
            return self.state.selectedRowKeys.indexOf(item.key) === -1;
        });

        console.log(result);
        this.setState({
            data: result,
            selectedRowKeys: [],
            keys: [],
        });
    }

    onDelete(key) {
        const dataSource = [...this.state.data];
        this.setState({data: dataSource.filter((item) => item.key !== key)});
    }

    componentWillMount() {
        const data = [];
        for (let i = 0; i < 46; i++) {
            data.push({
                key: i,
                name: `Edward King ${i}`,
                age: 32,
                address: `London, Park Lane no. ${i}`,
            });
        }
        this.setState({
            data: data,
        });
    }

    componentWillUnmount() {

    }

    hideModal() {
        this.setState({
            visible: false,
        });
    }

    start() {
        this.setState({
            selectedRowKeys: [],
        });
    }

    removeAll() {
        this.setState({data: []});
    }

    showModal() {
        this.setState({
            visible: true,
        });
    }

    render() {
        const {selectedRowKeys} = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange.bind(this),
        };
        return (
            <div>
                <Antd.Modal
                    title="写信"
                    visible={this.state.visible}
                    onOk={this.hideModal.bind(this)}
                    onCancel={this.hideModal.bind(this)}
                    okText="确认"
                    cancelText="取消">
                    <Antd.Row>
                        <Antd.Col xl={24}>
                            <Antd.Input placeholder="标题"/>
                        </Antd.Col>
                    </Antd.Row>
                    <Antd.Row className="my-mt-15">
                        <Antd.Col xl={24}>
                            <Antd.Input.TextArea rows={4} placeholder="写点什么吧"/>
                        </Antd.Col>
                    </Antd.Row>
                </Antd.Modal>
                <Antd.Row type="flex" justify="center">
                    <Antd.Col xl={24} className="hplus-wrapper">
                        <Antd.Row>
                            <Antd.Col xl={24} className="hplus-content">
                                <Antd.Row>
                                    <Antd.Col span={24}>
                                        <span>站内信</span>
                                    </Antd.Col>
                                </Antd.Row>
                                <Antd.Row className="hplus-menu my-pb">
                                    <Antd.Col xl={24}>
                                        <Antd.Button className="my-mr" onClick={this.showModal.bind(this)}>
                                            <Antd.Icon type="edit"/>
                                            <span>写信</span>
                                        </Antd.Button>
                                        <Antd.Button className="my-mr" onClick={this.start.bind(this)}>
                                            <Antd.Icon type="reload"/>
                                            <span>刷新</span>
                                        </Antd.Button>
                                        <Antd.Button className="my-mr" onClick={this.remove.bind(this)}>
                                            <Antd.Icon type="close"/>
                                            <span>删除</span>
                                        </Antd.Button>
                                        <Antd.Button className="my-mr" onClick={this.removeAll.bind(this)}>
                                            <Antd.Icon type="close"/>
                                            <span>删除全部</span>
                                        </Antd.Button>
                                    </Antd.Col>
                                </Antd.Row>
                                <Antd.Row>
                                    <Antd.Col xl={24}>
                                        <Antd.Tabs tabPosition={'left'}>
                                            <Antd.Tabs.TabPane tab={
                                                <span>
                                                    <Antd.Icon type="mail"/>
                                                    写邮件
                                                </span>
                                            } key="1">
                                                <Antd.Table rowSelection={rowSelection} columns={this.state.columns}
                                                            dataSource={this.state.data}/>
                                            </Antd.Tabs.TabPane>
                                            <Antd.Tabs.TabPane tab="Tab 2" key="2">Content of Tab 2</Antd.Tabs.TabPane>
                                            <Antd.Tabs.TabPane tab="Tab 3" key="3">Content of Tab 3</Antd.Tabs.TabPane>
                                        </Antd.Tabs>
                                    </Antd.Col>
                                </Antd.Row>
                            </Antd.Col>
                        </Antd.Row>
                    </Antd.Col>
                </Antd.Row>
            </div>
        );
    };
}


export default ReactRouterDom.withRouter(Home);
